<!-- 卡片全局组件 -->
<template>
    <div class="card">
        <div class="card-header">
            <div>主标题</div>
            <div>副标题</div>
        </div>
        <div v-if="content" class="card-content">
            {{ content }}
        </div>
    </div>
</template>

<script setup lang='ts'>
type Props = {
    content?: string,
}

defineProps<Props>()

</script>
<style lang='less' scoped>
@borderColor: #ccc;

.card {
    border: 1px solid @borderColor;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
        box-shadow: 0 0 10px @borderColor;
    }

    &-header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid @borderColor;
    }

    &-content {
        padding: 10px;
    }
}
</style>